<template>
  <div class="task_content_table">
    <el-scrollbar>
      <el-table
        v-loading="loading"
        :data="FlowTaskList.records"
        border
        style="width: 100%"
        height="550"
      >
        <el-table-column
          prop="sequence"
          width="50px"
          align="center"
          :label="$t('flowDefine.table.sequence')"
        >
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="myProcessInstance.processDefinitionName"
          :label="$t('flowTask.table.flowName')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="myProcessInstance.processDefinitionKey"
          :label="$t('flowTask.table.flowKey')"
          align="center"
        >
          <template #default="scope">
            <div style="color: #4f78da; cursor: pointer">
              {{ scope.row.myProcessInstance.processDefinitionKey }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" :label="$t('flowTask.table.taskNode')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="myProcessInstance.processDefinitionName"
          :label="$t('flowTask.table.operationalModule')"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="assignee"
          :label="$t('flowTask.table.allocatePersonnel')"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="startTime"
          :label="$t('flowTask.table.createTime')"
          width="200px"
        >
          <template #default="scope">
            {{ $dayjs.formateDate(scope.row.startTime, 'YYYY-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="endTime"
          :label="$t('flowTask.table.completeTime')"
          width="200px"
        >
          <template #default="scope">
            {{ $dayjs.formateDate(scope.row.endTime, 'YYYY-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="priority"
          :label="$t('flowTask.table.priority')"
        >
          <template #default="scope">
            <div style="color: #4f78da; cursor: pointer">
              {{ scope.row.priority }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="myProcessInstance.suspensionState"
          :label="$t('flowTask.table.status')"
        >
          <template #default="scope">
            <div style="color: #4f78da; cursor: pointer">
              {{ scope.row.endTime ? '已办' : '待办' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="operation" :label="$t('flowTask.table.operation')">
          <template #default="scope">
            <div class="task_operations">
              <i
                v-limit="'LCZX:LCKZ:LCRW:SHOW'"
                @click="showView(scope.row)"
                class="el-icon-document"
              ></i>
              <i
                v-limit="'LCZX:LCKZ:LCRW:CHECK'"
                v-if="!scope.row.endTime"
                @click="changeKey({ key: 2, item: scope.row })"
                class="el-icon-check"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <el-pagination
      background
      @prev-click.stop="currentChange"
      @next-click.stop="currentChange"
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="FlowTaskList.total"
      align="right"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  props: ['FlowTaskList', 'loading'],
  inject: ['showView'],
  data() {
    return {}
  },

  computed: {
    ...mapState('flowTaskStore', ['FlowTaskList']),
  },

  // mounted() {},

  methods: {
    ...mapMutations('flowTaskStore', ['changeKey']),
    currentChange(Num) {
      this.$emit('getFlowListData', Number(Num))
    },
  },
}
</script>
<style lang="scss" scoped>
.task_content_table {
  height: calc(100% - 110px);

  & .task_operations {
    display: flex;
    align-items: center;
    & > i {
      font-size: 20px;
      margin-left: 10px;
      color: #4f78da;
      cursor: pointer;
    }
  }
}
.task_flowtitle {
  padding: 0 20px;
  color: #4f78da;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
